<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Route 路由</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/vue-router.min.js"></script>
</head>

<body>

    <div id="app">
        <h1>Vue Route</h1>
        <p>
            <router-link to="/">首页</router-link>
            <router-link to="/about">关于我们</router-link>
            <router-link to="/contact">联系我们</router-link>
            <router-link to="/user/2">个人中心</router-link>
        </p>
        <router-view></router-view>
    </div>

    <script>
        // 1. 定义 (路由) 组件。
        const Home = {
            template: '<div>这是 -> 首页</div>'
        };

        const About = {
            template: '<div>这是 -> 关于我们</div>'
        };

        const Contact = {
            template: '<div>这是 -> 联系我们</div>'
        };

        const User = {
            template: '<div>这是 -> 用户中心 User {{ $route.params.id }}</div>'
        }

        // 2. 定义路由
        const routes = [{
            path: '/',
            component: Home
        }, {
            path: '/contact',
            component: Contact
        }, {
            path: '/about',
            component: About
        }, {
            path: '/user/:id',
            component: User
        }]

        // 3. 创建 router 实例，然后传 `routes` 配置
        const router = new VueRouter({
            // mode: 'history', //默认是hash #about - 需要端支持 否则刷新会404
            routes
        })

        // 入口
        const app = new Vue({
            router
        }).$mount('#app');
    </script>

</body>

</html>